import * as React from 'react';
import './condition.scss'
class Jxs extends React.Component{
     render() {
        const arr = [
            {
                val:'水果',
                arr :[
                    {val:'香蕉'},{val:'苹果'},{val:'榴莲'}
                ]
            },
            {
                val:'鲜花',
                arr :[
                    {val:'玫瑰'},{val:'牡丹'},{val:'百合'}
                ]
            },
            {
                val:'海鲜',
                arr :[
                    {val:'龙虾'},{val:'鲍鱼'},{val:'乌贼'}
                ]
            },
        ];
        return (
            <div className="c-react-home-wrap react-loop-condition">
                <h2 onClick={()=>{
                    window.location.href='http://10.15.198.18:8090/pages/viewpage.action?pageId=3932983#id-%E3%80%90%E5%88%86%E4%BA%AB%E4%BC%9A1811%E3%80%9109-react%E8%84%9A%E6%89%8B%E6%9E%B6---create-reate-app-7.2%E3%80%81%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93'
                }}>条件渲染</h2>
                <p>顾名思义就是根据条件渲染数据，条件判断一般常用的有 if、|| 、&& 、三元等</p>
                <section className="main-box">
                    <div>
                        <h4 className="list-title">一、通过if渲染数据，这里只渲染水果</h4>
                        <ul>
                        {
                            arr.map((m,i)=>{
                                if(m.val === "水果"){
                                    return (
                                        <li key={i}>
                                            <h4>{m.val}：</h4>
                                            <div>{
                                                m.arr.map((n,ind)=>{
                                                    return (
                                                        <span key={ind}>{ind+1}. {n.val}</span>
                                                    )
                                                })
                                            }</div>
                                        </li>
                                    )     
                                }

                                return false
                            })
                        }
                        </ul>
                        <img src={require('$img/react/loop-cond-if.png')} alt=""/>
                    </div>
                    <div>
                        <h4 className="list-title">二、通过||、&&渲染数据，这里渲染鲜花和水果</h4>
                        <ul>
                        {
                            arr.map((m,i)=>{
                               return ( (m.val ==='鲜花' || m.val ==='水果') &&
                                    <li key={i}>
                                        <h4>{m.val}：</h4>
                                        <div>{
                                            m.arr.map((n,ind)=>{
                                                return (
                                                    <span key={ind}>{ind+1}. {n.val}</span>
                                                )
                                            })
                                        }</div>
                                    </li>
                               )
                            })
                        }
                        </ul>
                        <img src={require('$img/react/loop-cond-huo.png')} alt=""/>
                    </div>
                    <div>
                        <h4 className="list-title">三、通过三元运算符渲染，这里只渲染海鲜</h4>
                        <ul>
                        {
                            arr.map((m,i)=>{
                                return (
                                    m.val ==='海鲜' ? <li key={i}>
                                        <h4>{m.val}：</h4>
                                        <div>{
                                            m.arr.map((n,ind)=>{
                                                return (
                                                    <span key={ind}>{ind+1}. {n.val}</span>
                                                )
                                            })
                                        }</div>
                                    </li> :''
                                )  
                            })
                        }
                        </ul>
                        <img src={require('$img/react/loop-cond-san.png')} alt=""/>
                    </div>
                </section>
                
            </div>
        );
    }
}

export default Jxs;
